<template>
	<view  style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<view style="display: flex;flex-direction: row; align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">电话：</text>
			<uni-easyinput :disabled="true" :focus="telfocus" type="number" v-model="tel" placeholder="请输入家长联系方式" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">姓名：</text>
			<uni-easyinput :disabled="true" type="text" v-model="name" placeholder="请输入学生姓名" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">年龄：</text>
			<uni-easyinput :disabled="true" type="number" v-model="age" placeholder="请输入学生年龄" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">校区：</text>
			<picker @change="xiaoquxuanze" :range="xiaoqulist" style="width: 80%;">
				<!-- <uni-easyinput type="text" disabled v-model="xiaoqu" placeholder="请选择校区" suffixIcon="bottom" /> -->
				<view style="display: flex;border-width: 4rpx;border-color: #F2F2F2;border-radius:8rpx;border-style: solid;height: 70rpx;align-items: center;justify-content: space-between;">
					<view class="">
						<view style="color: black;margin-left: 20rpx;">
							{{xiaoqu!=='请选择校区'?xiaoqu:''}}
						</view>
						<view style="color: #999999;font-size: 25rpx;margin-left: 20rpx;">
							{{xiaoqu=='请选择校区'?xiaoqu:''}}
						</view>
					</view>
					<view class="">
						<uni-icons style="font-size:38rpx;margin-right:10rpx;" type="bottom"></uni-icons>
					</view>
				</view>
			</picker>
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">课程：</text>
			<view style="display: flex;align-items: center;">
				<uni-easyinput style="width: 420rpx;" type="text" v-model="kecheng" placeholder="请输入课程关键词"  />
				<picker @change="bindPickerChange"  :range="kechenglistname">
					<uni-icons @click="kechengfun" style="font-size: 40rpx;margin-left:20rpx;" type="bottom"></uni-icons>
				</picker>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">住址：</text>
			<uni-easyinput :disabled="true" type="text" v-model="zhuzhi" placeholder="请输入学生住址" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">就读学校：</text>
			<uni-easyinput :disabled="true" type="text" v-model="school" placeholder="请输入学生就读学校" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">就读年级：</text>
			<uni-easyinput :disabled="true" type="text" v-model="nianji" placeholder="请输入学生就读学校" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">报名日期：</text>
			<uni-easyinput type="text" disabled="" v-model="baomingdate" placeholder="请输入报名日期" />
			<!-- <picker mode="date" :value="baomingdate" :start="startDate" :end="endDate" @change="bindDateChange">
				<uni-easyinput type="text" v-model="baomingdate" placeholder="请输入报名日期" />
			</picker> -->
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">截止日期：</text>
			<uni-easyinput type="text" disabled="" v-model="jiezhidate" placeholder="请输入截止日期" />
			<!-- <picker mode="date" :value="jiezhidate" :start="startDate" :end="endDate" @change="bindDateChange1">
				
			</picker> -->
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">报名费用：</text>
			<uni-easyinput type="number" disabled="" v-model="money1" placeholder="请输入报名所交费用" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">收费方式：</text>
			<uni-easyinput type="text" disabled="" v-model="shoufeifangshi" placeholder="请输入收费的方式" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">课程数量：</text>
			<uni-easyinput type="number" disabled="" v-model="kechengshu" placeholder="请输入报名课程的数量" />
		</view>
		<view style="display: flex;flex-direction: row;align-items: center;width: 80%;margin: 20rpx auto;">
			<text style="color: blue;font-weight: 500;">已核销数量：</text>
			<uni-easyinput type="number" disabled="" v-model="yihexiaoshu" placeholder="请输入已上课程数量" />
		</view>

		<view @click="tijiao"
			style="display: flex;background-color: blue;width: 40%; border-radius: 20rpx;margin: 60rpx auto;color: white;justify-content: center;align-items: center;padding: 20rpx 0;">
			提交</view>

	</view>
</template>

<script>
	import getDateTime from '@/common/getdateTime.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				kechengid:'',
				iskecheng:'',//判断课程为选择而不是输入的
				telfocus: true, //电话输入框是否自动获取焦点
				iszhaopian: 0, //记录照片是否上传完成，0为未完成，1为完成。
				detail: '', //修改明细记录
				xiaoqu1: false, //选择校区是否不能输入 
				shu2: 0, //用来判断手机号已存在，不能提交
				ip: '', //判断修改还是新增
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "blue",
						width: 2,
						style: 'dashed',
						radius: '12px'
					}
				},
				item: {},
				date: currentDate,
				name: '',
				age: '',
				zhuzhi: '',
				kecheng: '',
				nianji: '',
				school: '',
				tel: '',
				nianji: '',
				baomingdate: '',
				jiezhidate: '',
				kechengshu: null,
				yihexiaoshu: 0,
				money1: null,
				shoufeifangshi: '',
				kecheng: '',
				yuankecheng:'',
				zhaopian: '',
				kechenglist: [], //从数据库中获取课程的LIST
				kechenglistname:[],
				xiaoqu: '请选择校区',
				xiaoqulist: [], //从数据库中获取校区LIST
				infor: [], //获取要修改学生的信息
			}
		},
		async onLoad() {
			let meiyi_name_tel=await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren=meiyi_name_tel.name+meiyi_name_tel.mobile
			this.infor = await uni.getStorageSync('aoyashenginfor')
			this.duqushuju()
			this.xiaoqufun()
			var timeStr = getDateTime.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.baomingdate = timeStr
			this.kechengfun()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 课程的数据库调取
			kechengfun() {
				let arr=[]
				this.kechenglistname=[]
				this.kechenglist=[]
				arr.push(this.xiaoqu)
				uniCloud.callFunction({
					name:"funshare",
					data:{
						leixing:27,//类型为27时，获取本校区的课程
						xiaoqu:arr,
						key:this.kecheng
					}
				}).then(res=>{
					this.kechenglist=res.result.data
					res.result.data.map(item => {
						this.kechenglistname.push(item.name)
					})
				})
			},
			//调出校区，并去重
			async xiaoqufun(){
				const res=await uni.getStorageSync('aoyashengxiaoqu')
				this.xiaoqulist1 = res.result.data
				for(let i=0;i<this.xiaoqulist1.length;i++){
					let jishu=0
					for(let j=i+1;j<this.xiaoqulist1.length;j++){
						if(this.xiaoqulist1[i].name==this.xiaoqulist1[j].name){
							jishu=9
							break
						}
					}
					if(jishu==0){
						this.xiaoqulist.push(this.xiaoqulist1[i].name)
					}
				}
			},
			//读取学生的基本信息
			duqushuju() {
				console.log('=',this.infor)
				this.yuankecheng=this.infor.kecheng
				this.tel = this.infor.id[0].mobile
				this.name = this.infor.id[0].name
				this.age = this.infor.id[0].age
				this.zhuzhi = this.infor.id[0].zhuzhi
				this.school = this.infor.id[0].school
				this.nianji = this.infor.id[0].nianji
				this.jingshouren = this.jingshouren
				this.jiezhidate                =this.infor.jiezhidate
				this.money1                    =this.infor.money1
				this.shoufeifangshi            =this.infor.shoufeifangshi
				this.kechengshu                =this.infor.kechengshu
				this.yihexiaoshu               =this.infor.yihexiaoshu
			},
			//确定起始和结束的显示时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//报名时间
			// bindDateChange: function(e) {
			// 	this.baomingdate = e.detail.value
			// },
			//截止日期
			// bindDateChange1: function(e) {
			// 	this.jiezhidate = e.detail.value
			// },
			// 添加新学生信息到数据库
			tijiao() {
				//一、把baokelist修改一条新数据，二、xiugaishuju中添加一条信息
				// 表格中有没填写的部分,提示一下
				if(this.kecheng!==this.iskecheng){
					return uni.showToast({
						title: '课程须为选择，不能直接输入！',
						icon: 'none',
						mask: true
					})
				}
				if (!this.xiaoqu | !this.name | !this.age | !this.zhuzhi | !this.kecheng | !this.school | !this.nianji | !
					this.baomingdate | !this.jiezhidate | !this.kechengshu | !this.money1 | !this.shoufeifangshi) {
					return uni.showToast({
						title: '请填写每一个选项',
						icon: 'none',
						mask: true
					})
				}
				uni.showLoading({
					title:"数据提交中……"
				})
				uniCloud.callFunction({
					name:"xinhuiyuan",
					data:{
						_id:this.infor._id,
						leixing:6,//
						leibie:"调课程",
						jingshouren:this.jingshouren,
						// baomingdate:this.baomingdate,
						// jiezhidate:this.jiezhidate,
						// kechengshu:this.kechengshu,
						// money1:parseInt(this.money1),
						// yihexiaoshu:parseInt(this.yihexiaoshu),
						// shoufeifangshi:this.shoufeifangshi,
						// id:this.infor.id[0]._id,
						xiaoqu:this.xiaoqu,
						kecheng:this.kecheng,
						// zhuangtai:1,
						// yikefeiyong: parseInt(parseInt(this.money1) / parseInt(this
						// 	.kechengshu) * 100) / 100,
						kechengid:this.kechengid,
						detail: this.name+this.tel + "调课程，原课程名称："+this.yuankecheng+"→"+ this.kecheng  ,
						riqi:getDateTime.dateTimeStr('y-m-d h:i:s'),
					}
				}).then(res=>{
					uni.navigateTo({
						url:'/pages/xueshenginfor/xueshenginfor'
					})
					uni.showToast({
						title: '调课程成功',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
				})
			},
			//选择校区
			xiaoquxuanze: function(e) { //选择校区，根据校区选出课程
				this.xiaoqu = this.xiaoqulist[e.detail.value]
			},
			//选择课程
			bindPickerChange: function(e) {
				if (!this.xiaoqu) {
					uni.showToast({
						title: '请先选择校区'
					})
					return
				}
				if (this.ip == 1) {
					uni.showToast({
						title: '不能修改课程'
					})
					return
				}
				this.kechengid = this.kechenglist[e.detail.value]._id
				console.log(this.kechengid)
				this.iskecheng=this.kecheng = this.kechenglistname[e.detail.value]
			},
		}
	}
</script>

<style>

</style>